<script setup name="demoPage">
import { ref, onMounted, reactive, watch } from 'vue'

// 响应式状态
const count = ref(0)
let car = reactive({ brand: '奔驰', price: 100 })
let person = ref({ name: '张三', age: 12 })
let item = ref({ propValue: '' })
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green',
}
// 用来修改状态、触发更新的函数
function increment() {
  count.value++
  console.log('count', count, count.value)
}
function modifyPrice() {
  car.price += 10
  // console.log('count',count)
  // console.log('car', car)
  console.log('person', person)
}
// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
watch(
  () => car.price,
  (newValue, oldValue) => {
    console.log('汽车价格', newValue, oldValue)
  },
)
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button><br />
  <div>汽车品牌{{ car.brand }},价格{{ car.price }}</div>
  <button @click="modifyPrice">修改价格</button>
  <hr />
  <div>绑定价格</div>
  <div v-bind="objectOfAttrs">绑定对象</div>
  <el-input
    v-model="item.propValue"
    @change="saveChange"
    :data-pos="pos"
    ref="inputRef"
    style="border: 1px solid blue"
    value-key="obsvName"
    class="comp-style pr-15"
    @keydown="handleKeyDown"
  />

  <div class="container-fluid wraper">
    <h3 class="title">Vue3 组件间通信</h3>
    <hr />
    <div class="row">
      <div class="col-xs-3 col-md-3 col-lg-3 col-xl-3">
        <!-- 导航区 -->
        <router-link active-class="active" class="list-group-item" to="/demo">demo</router-link>
        <router-link active-class="active" class="list-group-item" to="/props"
          >1. props</router-link
        >
        <router-link active-class="active" class="list-group-item" to="/event"
          >2. 自定义事件(shallowRef,defineAsyncComponent,teleport)</router-link
        >
        <router-link active-class="active" class="list-group-item" to="/mitt">3. mitt</router-link>
        <router-link active-class="active" class="list-group-item" to="/model"
          >4. v-model</router-link
        >
        <router-link active-class="active" class="list-group-item" to="/attrs"
          >5. $attrs</router-link
        >
        <router-link active-class="active" class="list-group-item" to="/$refs-$parent"
          >6. <span class="small">$refs、$parent</span></router-link
        >
        <router-link active-class="active" class="list-group-item" to="/provide-inject"
          >7. provide、inject</router-link
        >
        <!-- <router-link active-class="active" class="list-group-item" to="/pinia"
          >8. pinia</router-link
        > -->
        <router-link active-class="active" class="list-group-item" to="/slot">9. slot</router-link>
      </div>
      <div class="col-xs-9 col-md-9 col-lg-9 col-xl-9">
        <div class="panel-body">
          <!-- 占位一个展示区 -->
          <router-view></router-view>
        </div>
      </div>
    </div>
    <hr />
    <h3 class="title">其他api</h3>
    <router-link active-class="active" class="list-group-item" to="/shallowRef-shallowReactive"
      >shallowRef与shallowReactive</router-link
    >
    <router-link active-class="active" class="list-group-item" to="/readonly-shallowReadonly"
      >readonly-shallowReadonly</router-link
    >
    <router-link active-class="active" class="list-group-item" to="/toRaw-markRaw"
      >toRaw-markRaw</router-link
    >
    <h1 class="">表格 表单</h1>
    <hr />
    <div>
      <router-link active-class="active" class="list-group-item" to="/TablePrint"
        >管道滑脱危险因素评估单</router-link
      >
      <router-link active-class="active" class="list-group-item" to="/LifeTable"
        >生活自理能力评分表</router-link
      >
      <router-link active-class="active" class="list-group-item" to="/PaduaTable"
        >非手术患者Padua血栓风险评估单</router-link
      >
      <router-link active-class="active" class="list-group-item" to="/Demotemplate"
        >Demotemplate(vue3模板组件)</router-link
      >
      <router-link active-class="active" class="list-group-item" to="/BloodTransfusion"
        >输血记录</router-link
      >
      <router-link active-class="active" class="list-group-item" to="/FallTable"
        >跌倒风险评估单（约翰霍普金斯法）</router-link
      >
      <router-link active-class="active" class="list-group-item" to="/MechanicalVentilationNew"
        >安吉中医院机械通气表</router-link
      >

      <router-link active-class="active" class="list-group-item" to="/DischargeHandover"
        >出院交接单</router-link
      >
      <router-link active-class="active" class="list-group-item" to="/bloodGlucose"
        >血糖记录单</router-link
      >

      <router-link active-class="active" class="list-group-item" to="/rescue">一键抢救</router-link>
    </div>
  </div>
</template>

<style>
.wraper .title {
  padding: 20px;
  text-align: center;
  min-width: 610px;
}

.wraper .small {
  font-size: 15px;
}

.wraper .list-group-item {
  min-width: 230px;
  margin-left: 16px;
}
</style>
